<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'DirectionalLight',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addDirectionalLight();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addDirectionalLight() {
                let entity = this.viewer.entities.add({
                    name: "Blue box",
                    position: Cesium.Cartesian3.fromDegrees(114.0, 40.0, 0.0),
                    box: {
                        dimensions: new Cesium.Cartesian3(300.0, 300.0, 300.0),//尺寸，长宽高
                        material: Cesium.Color.BLUE,//材质
                        fill: true,//是否填充
                        shadows: Cesium.ShadowMode.ENABLED//开启接收并且投射阴影
                    },
                    ellipsoid: {
                        radii: new Cesium.Cartesian3(200.0, 200.0, 200.0),//用于指定椭球的半径，三个方向半径不相等就是椭球体
                        material: Cesium.Color.BLUE,
                        shadows: Cesium.ShadowMode.CAST_ONLY//开启接收并且投射阴影
                    },
                });
                this.viewer.flyTo(entity)

                let directionalLight = new Cesium.DirectionalLight({
                    direction:Cesium.Cartesian3.normalize(Cesium.Cartesian3.fromDegrees(114.0, 40.0, 0.0)),
                    color:Cesium.Color.WHITE,
                    intensity:1.0
                });
                //this.viewer.scene.primitives.add(directionalLight)


            }
        },

    }
</script>

